<template>
  <div class="live">
    <div class="list">
      <navigator class="item" v-for="item in liveData" :key="item.roomid"  :url="`plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${item.roomid}`">
          <div class="inset">
          <image :src="item.cover_img" style="height: 141px" />
          <div class="item_p">
            <p class="time">开播：{{ item.start_time }}</p>
          </div>
          <div class="item_p">
            <p class="title">{{ item.name }}</p>
          </div>
          <div class="item_p">
            <p class="name">
              <span>主播</span>
              {{ item.anchor_name }}
            </p>
          </div>
        </div>
      </navigator>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      liveData: (state) => state.live.liveData,
    }),
  },
  methods: {
    ...mapActions({
      liveList: "live/liveList",
    }),
  },
  mounted() {
    this.liveList();
  },
};
</script>

<style >
.live {
  background: #f4f4f4;
  min-height: 100vh;
  height: 100%;
  box-sizing: border-box;
  color: #333;
  font-family: helvetica, "Heiti SC", PingFangSC-Light;
}
.list {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 44vw;
  margin-left: 4vw;
  margin-top: 40rpx;

  overflow: hidden;
  display: block;
}
.inset {
  background: #fff;
  border-radius: 16rpx;
}
.item image {
  width: 100%;
}
.time {
  color: #999;
  font-size: 32rpx;
  margin: 10rpx;
}
.title {
  font-size: 50rpx;
  margin: 10rpx;
}
.name {
  font-size: 46rpx;
  margin-left: 20rpx;
  color: black;
}
.name span {
  display: inline-block;
  background: antiquewhite;
  border-radius: 50%;
  width: 10vw;
  height: 10vw;
  display: inline-block;
  font-size: 30rpx;
  text-align: center;
  line-height: 10vw;
  color: burlywood;
  margin-right: 20rpx;
}
</style>
